<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 100px;
				background-color: black;
				border-radius: 200px 200px 0 0;
				
				
			}
			.div2{
				width: 200px;
				height: 100px;
				background-color:white;
				border-radius: 50%;
				position: absolute;
				border-radius: 0 0 200px 200px ;
		
				
			}
			.suby1{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color:white;
				position: absolute;
				top: 50px;
				z-index: 10;
			}
			.suby2{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: black;
				position: absolute;
				right: 0px;
				top: -50px;
			
			}
			.suby3{
				width: 35px;
				height: 35px;
				border-radius: 50%;
				background-color: black;
				position: absolute;
				top: 35px;
				right: 35px;
				
			}
			.suby4{
				width: 35px;
				height: 35px;
				border-radius: 50%;
				background-color:white;
				position: absolute;
				top: 35px;
				left: 35px;
				
			}
			.div3{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				position:absolute;
				top: 10px;
				left:10px;
				box-shadow:0px 0px 40px  lightgrey;
				</style>
	</head>
	<body>
	<div class=div3 >
		<div class=div1>
			<div class=suby1>
				<div class="suby3"></div>
			</div>
		</div>
		<div class=div2>
			<div class="suby2">
				<div class="suby4"></div>
			</div>
		</div>
		</div>
		<script type="text/javascript">
			var l=0;
			var t=0;
			var lrot = 10;
			var trot = 10;
			
			setInterval(function(){
				var taiji = document.querySelector(".div3");
				l=l+ lrot;
				t=t+ trot;
				if(l >= 1160){
					lrot = -10;
				}
				if (l<= 0) {
					lrot= 10;
				}
				if (t>= 420) {
					trot= -10;
				}
				if (t<= 0) {
					trot = 10;
				}
				taiji.style.left=l+"px";
				taiji.style.top=t+"px";
			},50)
		</script>
	</body>
</html>
